<template>
    <div v-if="affixList && item" class="result-item compare-item-container">
        <!-- item排序封装对象  item.weight item.timestap  item.data计算结果 {mark count list}-->
        <!-- item.data  count { 词条:数量 ...}  compared favorited list [ 刻印对象 ] -->

        <van-row>
            {{ (item.name || '') | nameSplit }}
        </van-row>

        <van-row :class="permSwitch ? 'switchMarginBottom1' : 'switchMarginBottom2'">
            <van-divider>
                <van-icon name="star" />&nbsp;{{ item.mark }}
            </van-divider>
        </van-row>

        <!-- 刻印信息 双排 -->
        <template v-if="permSwitch">
            <div class="result-item-double">
                <div class="result-item-double-row">
                    <div v-for="key in 3">
                        <van-image :src="item.list[key - 1].icon" />
                        <span @click='engrViewData = item.list[key - 1]; engrViewShow = true'>
                            {{ key | locationWord }}</span>
                    </div>
                </div>

                <div class="result-item-double-row">
                    <div v-for="key in 3" span="8" :key="key">
                        <van-image :src="item.list[key + 2].icon" />
                        <span @click='engrViewData = item.list[key + 2]; engrViewShow = true'>
                            {{ key + 3 | locationWord }}

                        </span>
                    </div>
                </div>
            </div>
        </template>

        <!-- 刻印信息 六角 -->
        <template v-if="!permSwitch">
            <div class="result-item-hexagon">
                <template v-for="index in 6">
                    <span :class="'loc_word_' + index"
                        @click='engrViewData = item.list[index - 1]; engrViewShow = true'>
                        {{ index | locationWord }}
                    </span>
                    <van-image :class="'loc_img_' + index" :src="item.list[index - 1].icon" />
                </template>
            </div>
        </template>

        <!-- 词条信息 -->
        <div class="result-item-affix-container border-top">
            <van-row class="result-affix-row" v-for="affix in getSortedCount(item.count)">
                <el-tooltip effect="dark" :content="onAffixBtnMouseover(affix.key)" placement="top">
                    <van-button plain class='affix-div' :type="$options.filters.getButtonTypeByAffix(affix.key)">
                        {{ affix.key }}x{{ affix.num }}
                    </van-button>
                </el-tooltip>
            </van-row>
        </div>

        <!-- 套装信息 -->
        <!-- <template>
            <van-row class="engr-effect">
                <van-col v-for="effect in getGroupEffects(item)" offset="1" span="22">
                    {{ effect }}
                </van-col>
            </van-row>
        </template> -->

        <!-- 底部按钮 第一排 -->
        <van-row class="result-btns-row" style="bottom:40px;">
            <slot name="buttons-1">&nbsp;</slot>
        </van-row>

        <!-- 底部按钮 第二排 -->
        <van-row class="result-btns-row" style="bottom:5px;">
            <slot name="buttons-2">&nbsp;</slot>
        </van-row>

    </div>
</template>

<script>
import EngrView from './popups/EngrView';
const locWrods = ['I', 'II', 'III', 'IV', 'V', 'VI'];
const btnTypeAffix = ['', 'danger', 'danger', 'info', 'warning'];
let vm;

export default {
    name: "CompareItem",
    components: {
        EngrView
    },

    props: {
        digiteSwitch: Boolean, //数字和罗马数字切换
        permSwitch: Boolean, //六角和双排切换
        item: Object,
    },

    beforeCreate() {
        vm = this;
    },

    filters: {
        //标题 最大保留个字
        nameSplit(val) {
            return vm.chineseSplitFunction(String(val), 16)[0];
        },

        locationWord(data) {
            if (vm.digiteSwitch) {
                return data
            }
            return locWrods[data - 1]
        },

        getButtonTypeByAffix(data) {
            let type = 0;
            vm.affixList.some(e => {
                if (e.name == data) {
                    type = e.type;
                    return true;
                }
            })
            return btnTypeAffix[type];
        },

    },

    computed: {
        affixList() {
            return this.$store.state.affixList;
        },

        affixOptions() {
            return this.$store.state.affixOptions;
        },

        compare_list() {
            return this.$store.state.compare_list;
        }
    },

    data: () => ({
        isWeightsViewShow: false,
        weightsResult: null,
    }),

    methods: {
        stringlenFunction: function (str) {
            var len = 0;
            for (var i = 0; i < str.length; i++) {
                var c = str.charCodeAt(i);
                //单字节加1   
                if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
                    len++;
                } else {
                    len += 2;
                }
            }
            return len;
        },

        chineseSplitFunction(src, bytes) {
            let that = this;
            if (src == null) {
                return null;
            }
            let splitList = [];
            let startIndex = 0; // 字符串截取起始位置
            let endIndex = bytes > src.length ? src.length : bytes; // 字符串截取结束位置
            while (startIndex < src.length) {
                let subString = src.substring(startIndex, endIndex);
                // 截取的字符串的字节长度大于需要截取的长度时，说明包含中文字符
                // 获取字符串的长度，如果有中文，则每个中文字符计为2位
                while (that.stringlenFunction(subString) > bytes) {
                    --endIndex;
                    subString = src.substring(startIndex, endIndex);
                }
                splitList.push(src.substring(startIndex, endIndex));
                startIndex = endIndex;
                // 判断结束位置时要与字符串长度比较(src.length)，之前与字符串的bytes长度比较了，导致越界异常。
                endIndex = (startIndex + bytes) > src.length ? src.length : startIndex + bytes;
            }
            return splitList;
        },

        getGroupEffects(item) {
            let object = {};
            item.list.forEach(e => {
                object[e.effect] = 1; //利用key可以覆盖的原理
            });
            return Object.keys(object);
        },

        //根据词条权重排序
        getSortedCount(data) {
            //配置权重表
            if (!this.affixWeight && this.affixList) {
                this.affixWeight = {};
                this.affixList.forEach(e => {
                    this.affixWeight[e.name] = e.weight;
                })
            }

            let arr = [];
            Object.keys(data).forEach(k => {
                arr.push({ key: k, num: data[k] })
            });

            arr.sort((a, b) => {
                return this.affixWeight[b.key] - this.affixWeight[a.key]; //降序
            });

            return arr;
        },

        onAffixBtnMouseover(key) {
            let message = "";
            this.affixList.some(e => {
                if (e.name == key) {
                    message = '\n' + e.text;
                    return true;
                }
            })
            return message;
        }
    }
}
</script>


<style scoped>
.result-item {
    float: left;
    position: relative;
    border: 1px solid darkgray;
    height: 620px;
    width: 145px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.result-item .van-col {
    /* width: 35px; */
    text-align: center;
}

.result-item .van-row {
    width: 100%;
    text-align: center;
    /* border-bottom: 1px solid rgb(235, 237, 240); */
}

.switchMarginBottom1 {
    margin-bottom: 90px;
}

.switchMarginBottom2 {
    margin-bottom: 130px;
}

.engr-effect {
    height: 80px;
    color: darkgray;
    font-size: 12px;
}

.engr-effect .van-col {
    border-top: 1px solid rgb(235, 237, 240);
}

.result-affix-row {
    height: 35px;
    line-height: 35px;
    text-align: center;
}

.result-affix-row .affix-div {
    width: 100px;
    height: 30px;
    text-align: left;
    padding-left: 5px;
    cursor: pointer;
}

.result-btns-row {
    position: absolute;
    /* margin-top: 5px; */
}
</style>

<!-- 双排 -->
<style scoped>
.result-item-double {
    position: absolute;
    height: 80px;
    width: 145px;
    top: 60px;
    left: 0px;
    right: 40px;

    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.result-item-double-row {
    height: 45px;
    /* border-top: 1px solid rgb(235, 237, 240); */
}

.result-item-double-row>div {
    position: relative;
    float: left;
    height: 40px;
    width: 40px;
    margin: 0 3px;
    /* border-left: 1px solid rgb(235, 237, 240); */
    /* border-right: 1px solid rgb(235, 237, 240); */
}

.result-item-double .van-image {
    height: 40px;
    width: 40px;
    z-index: 900;
}

.result-item-double span {
    position: absolute;
    top: 3px;

    cursor: pointer;
    display: block;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 35px;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
    z-index: 1000;
}
</style>

<!-- 六角排列 -->
<style scoped>
.result-item-hexagon {
    position: absolute;
    /* border: 1px solid red; */
    height: 150px;
    width: 150px;
    top: 45px;
    left: -8px;
    right: 75px;

    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.result-item-hexagon span,
.result-item-hexagon .van-image {
    display: block;
    position: absolute;
    height: 40px;
    width: 40px;
    z-index: 900;
    cursor: pointer;
}

.result-item-hexagon span {
    text-align: center;
    line-height: 35px;
    z-index: 1000;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
}

.result-item-hexagon .loc_img_1,
.result-item-hexagon .loc_word_1 {
    top: 20px;
    left: 32.6px;
}

.result-item-hexagon .loc_img_2,
.result-item-hexagon .loc_word_2 {
    top: 65px;
    left: 10px;
}

.result-item-hexagon .loc_img_3,
.result-item-hexagon .loc_word_3 {
    top: 110px;
    left: 32.6px;
}

.result-item-hexagon .loc_img_4,
.result-item-hexagon .loc_word_4 {
    top: 110px;
    left: 84.6px;
}

.result-item-hexagon .loc_img_5,
.result-item-hexagon .loc_word_5 {
    top: 65px;
    left: 110px;
}

.result-item-hexagon .loc_img_6,
.result-item-hexagon .loc_word_6 {
    top: 20px;
    left: 84.6px;
}

.compare-item-container /deep/.result-btns-row .van-button {
    height: 30px;
    width: 30px;
    font-size: 20px;
    padding: 0;
    margin: 1px;
}
</style>